<template>
  <div class="box">
    <div class="logo"><img src="@/assets/images/teaching/logo.png" /></div>
    <div class="text">
      <img src="@/assets/images/teaching/login-text.png" />
    </div>

    <div class="warp">
      <el-form
        ref="registerForm"
        :model="registerForm"
        :rules="registernRules"
        label-position="left"
        label-width="0px"
        class="login-form"
      >
        <div class="title">修改密码</div>
        <div class="card">
          <el-form-item class="item" prop="userName">
            <div class="ico">
              <img src="@/assets/images/teaching/user.png" />
            </div>
            <div class="input">
              <el-input
                v-model="registerForm.userName"
                placeholder="请输入用户名"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item class="item" prop="oldPassword">
            <div class="ico">
              <img src="@/assets/images/teaching/password.png" />
            </div>
            <div class="input">
              <el-input
                  v-model="registerForm.oldPassword"
                  type="password"
                  placeholder="请输入原密码"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item class="item" prop="password">
            <div class="ico">
              <img src="@/assets/images/teaching/password.png" />
            </div>
            <div class="input">
              <el-input
                v-model="registerForm.password"
                type="password"
                placeholder="请输入新密码"
              ></el-input>
            </div>
          </el-form-item>
          <el-form-item class="item" prop="confirmPassword">
            <div class="ico">
              <img src="@/assets/images/teaching/password.png" />
            </div>
            <div class="input">
              <el-input
                v-model="registerForm.confirmPassword"
                type="password"
                placeholder="请再次输入新密码"
              ></el-input>
            </div>
          </el-form-item>
          <!--      <div class="item" style="margin-bottom: 0">-->
          <!--        <div class="ico"><img src="@/assets/images/teaching/ip.png"></div>-->
          <!--        <div class="input"><el-input v-model="input" placeholder="请输入验证码"></el-input>-->
          <!--          <div class="code"><img src="@/assets/images/teaching/66.png"></div>-->
          <!--        </div>-->
          <!--      </div>-->
          <div class="btn" style="margin-top: 40px">
            <el-button
              type="primary"
              @click="retrievePassword"
              v-loading="registering"
              >确定</el-button
            >
          </div>
          <div class="register" @click="toLoginUrl">返回登录</div>
        </div>
      </el-form>
    </div>
    <!-- 注册框 -->
  </div>
</template>
<script>
import { login, retrievePassword } from "@/api/login/login";
import { getToken, setToken } from "@/utils/auth";
import Cookies from "js-cookie";
import "element-plus/dist/index.css";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";

export default {
  data() {
    return {
      logining: false,
      registering: false,
      registerForm: {
        userName: "",
        password: "",
        oldPassword:"",
        confirmPassword: "",
        code: "",
        uuid: "",
      },
      loginForm: {
        userName: "",
        password: "",
        rememberMe: false,
        code: "",
        uuid: "",
      },
      loginRules: {
        userName: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
        ],
        // code: [{ required: true, trigger: 'change', message: '验证码不能为空' }]
      },
      registernRules: {
        userName: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],

        oldPassword: [
          { required: true, trigger: "blur", message: "原密码不能为空" }
        ],
        password: [
          { required: true, trigger: "blur", message: "新密码不能为空" },
          {
            min: 6,
            max: 18,
            message: "新密码的长度在 6 到 18 个字符",
            trigger: "blur",
          },
        ],
        confirmPassword: [{ validator: this.checkRePassword, trigger: "blur" }],
        // code: [
        //   { trigger: 'change', message: '验证码不能为空' }
        // ]
      },

      showRegister: true,
      // 其他原有数据...
      input: "",
    };
  },
  created() {
    const route = useRouter();
    const routeInfo = useRoute();
    let type = routeInfo.query.type;
    this.showRegister = type == 1;
  },

  methods: {
    toLoginUrl() {
      this.$router.push({ name: "login" });
    },
    checkRePassword(rule, value, callback) {
      if (value === "") {
        //保证非空
        callback(new Error("请再次确认密码"));
      } else if (value !== this.registerForm.password) {
        //保证一致
        callback(new Error("请确保两次输入的密码一样"));
      } else {
        callback();
      }
    },

    retrievePassword() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          // this.registering = true;
          retrievePassword(
            this.registerForm.userName,
            this.registerForm.password,
              this.registerForm.oldPassword,
            ""
          ).then((res) => {
            // 注册逻辑
            //this.registering = false;
            if (res.code && res.code == 200) {
              ElMessage.success({
                message: "修改成功，请登录!",
                type: "success",
              });
              // this.$router.push({ name: "login" });
              setTimeout(() => {
                this.toLoginUrl();
              }, 1000);
             // this.toLoginUrl();
            } else {
              //this.registering = false;
              ElMessage.error({
                message: res.msg,
                type: "error",
              });
            }
          });
        }
      });
    },

  },
};
</script>
<style scoped lang="scss">
.box {
  width: 100%;
  height: 100vh;
  background: url("@/assets/images/teaching/login-bg.png") no-repeat;
  background-size: 100% 100%;
  .logo {
    position: absolute;
    top: 33px;
    left: 33px;
    img {
      width: 270px;
    }
  }
  .text {
    height: 620px;
    width: 338px;
    position: fixed;
    left: 400px;
    top: 50%;
    transform: translateY(-50%);
  }
  .warp {
    background-color: #fff;
    position: fixed;
    width: 480px;
    height: 620px;
    padding-top: 80px;
    padding-bottom: 52px;
    box-sizing: border-box;
    right: 20%;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    box-shadow: 0 4px 20px 0 rgba(0, 54, 128, 0.08);
    .title {
      text-align: center;
      font-size: 30px;
      color: #111f2c;
      font-weight: 550;
      position: relative;
      padding-bottom: 15px;
      &:before {
        content: "";
        display: block;
        position: absolute;
        width: 92px;
        height: 6px;
        border-radius: 6px;
        background: #f01414;
        bottom: 0;
        left: calc(50% - 46px);
      }
    }
    .card {
      padding: 50px 80px 0;
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 24px;
        background: #f2f4f9;
        height: 52px;
        line-height: 52px;
        border-radius: 4px;
        .ico {
          width: 52px;
          height: 52px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .input {
          width: calc(100% - 52px);
          height: 100%;
          display: flex;
          font-size: 14px;
          color: #606266;
          position: relative;
          ::v-deep .el-input__wrapper {
            background: none !important;
            box-shadow: none !important;
          }
          .code {
            position: absolute;
            right: 5px;
            top: 7px;
          }
        }
      }
      .pass {
        a {
          float: right;
          font-size: 14px;
          color: #606266;
          line-height: 32px;
          cursor: pointer;
          &:hover {
            color: #f01414;
          }
        }
      }
    }
    .btn {
      margin-top: 82px;
      width: 100%;
      height: 50px;
      ::v-deep .el-button--primary {
        background: #f01414 !important;
        border-color: #f01414 !important;
        width: 100% !important;
        height: 100% !important;
      }
    }
    .register {
      text-align: center;
      font-size: 18px;
      color: #f01414;
      margin-top: 30px;
      cursor: pointer;
      &:hover {
        text-decoration: underline;
      }
    }
  }
}
</style>
